1 自己嘗試研究 API
npm install -g json-server安裝 json-server npm 套件。
結果裝成npm install json-server，就安裝失敗（附註：詳見另一篇，還沒寫好）之後亂查，還 google 到了
curl -X -GET https://...，好像是可以用在新增 JSON 資料（curl -X -POST）、取得資料（curl -X -GET）、刪除資料（curl -X -DELETE）。
好像想起來了，可以用在批次下載指令，以前做報告時，我有用過在下載每一小時的衛星雲圖。我這次嘗試使用curl -X -GET https://... > db.json下載後，印到 db.json 檔案裡。後來一想，API 串接的概念，就是資料交換，把資料下載下來好像哪裡不太對，因為不正是資料太大或者是想要借用別人的資料，才使用資料交換的概念嗎？如果下載下來，好像不太符合初衷。又繼續 Google，看到了這個網頁 JSON Server tutorial
簡直是救星，掃描了一下內容，發現關鍵字get_request.js，還不拿來參考一下，還安裝了 npm 套件的 axios，這次學聰明了，使用npm install -g axios就成功安裝。
// get_request.js
const axios = require('axios');
axios.get('http://localhost:3000/users')
.then(resp => {
data = resp.data;
data.forEach(e => {
console.log(`${e.first_name}, ${e.last_name}, ${e.email}`);
});
})
.catch(error => {
console.log(error);
});
然後我就很開心的拿來修改，把 data.forEach(e => {... data = resp.data} 的部分改成我要的迴圈：列出前十本書籍的 id 以及書名，輸出跟 index.js 程式碼如下：
// index.js
const axios = require('axios');
axios.get('https://lidemy-book-store.herokuapp.com/books')
.then(resp => {
data = resp.data;
for (let i=1; i<=10; i++) {
console.log(data[i].id, data[i].name)
}
})
.catch(error => {
console.log(error);
});
# @terminal
$ node index.js # 執行 javascript，輸出前十本書
1 克雷的橋
2 當我想你時，全世界都救不了我
3 我殺的人與殺我的人
4 念念時光真味
5 蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】
6 苦雨之地
7 你已走遠，我還在練習道別
8 想把餘生的溫柔都給你
9 你是我最熟悉的陌生人
10 偷書賊（25萬本紀念版本）
然後我就抱著喜悅開心的睡覺了，也沒有細查什麼是 axios。結果隔天早上熊熊想到，那到底是什麼套件啊...這麼神奇，而且我也看不懂 then 的意思，這樣交作業好像不太負責任。查了一下 axios 好像跟 vue 有關，又仔細想想，好像還沒學到 vue，所以不能使用，所以我昨天花了半天繞一大圈的找資料，最後又回歸了最原始的方法，就是回去看 [NET101] API串接的實戰影片。
2 回歸原始方法，研究範例
想說如法炮製，試試看 console.log(body) 會印出什麼資料。
// index.js 範例 1
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books',
function (error, response, body) {
console.log('body:',body) // 現在要測試印出的檔案資料長什麼樣
}
)
$ node index.js
[
{
"id": 1,
"name": "克雷的橋"
},
{
"id": 2,
"name": "當我想你時，全世界都救不了我"
},
{
"id": 3,
"name": "我殺的人與殺我的人"
},
{
"id": 4,
"name": "念念時光真味"
},
{
"id": 5,
"name": "蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】"
},
{
"id": 6,
"name": "苦雨之地"
},
{
"id": 7,
"name": "你已走遠，我還在練習道別"
},
{
"id": 8,
"name": "想把餘生的溫柔都給你"
},
{
"id": 9,
"name": "你是我最熟悉的陌生人"
},
{
"id": 10,
"name": "偷書賊（25萬本紀念版本）"
},
{
"id": 11,
"name": "在回憶消逝之前"
},
{
"id": 12,
"name": "懲罰"
},
{
"id": 13,
"name": "雲邊有個小賣部"
},
{
"id": 14,
"name": "颶光典籍三部曲：引誓之劍（上下冊套書）"
},
{
"id": 15,
"name": "危險維納斯"
},
{
"id": 16,
"name": "大旱"
},
{
"id": 17,
"name": "最後的再見"
},
{
"id": 18,
"name": "解憂雜貨店【暢銷35萬冊暖心紀念版】：回饋讀者，一次收藏2款書封！"
},
{
"id": 19,
"name": "高山上的小郵局：獻給書信和手寫年代的溫暖情詩，2019年最治癒人心的高暖度小說"
},
{
"id": 20,
"name": "在場證明"
}
]
結果印出書本目錄，現在我只需要前十本，所以需要使用拿手的迴圈來找出十本書，於是我加了以下迴圈。
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books' ,
function (error, response, body) {
try {
/* 新增這個迴圈， */
for (let i=0; i<10; i++) {
console.log(body[i].id, body[i].name)
}
/* 新增以上 */
} catch(error){
cosole.log(error)
}
}
)
結果印出 undefined。
$ node index.js
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
現在就要來看看到底發生什麼事情，console.log(body[i].id, body[i].name) 中變數的表示法是 object 的表示法，但是 body 是什麼型態呢？使用 console.log(typeof(body)) 後發現是 string 的變數型態。就想到 [NET101] 7-3 API 串接實戰的範例 1：DELETE 中的 const json = JSON.parse(body) //JSON 格式的字串 ，看不懂 JSON.parse() MDN 的用法，就去查詢發現： API 文件內的格式是JSON字串，所以我需要把資料從 JSON 格式的字串轉換成 JavaScript 的物件，這樣才能使用 body[i].id 在 js 檔案內擷取資料。
修改 js 檔案，如下：
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books' ,
function (error, response, body) {
/* 新增以下此行：查詢一下資料（ body ）的資料型態，發現是 string */
// console.log(typeof(body)) //typeof(body) is string
try {
/* 新增以下此行：把 JSON 格式的字串轉換成 JavaScript 的物件 */
const json = JSON.parse(body) //typeof(json) is object
for (let i=0; i<10; i++) {
console.log(json[i].id, json[i].name)
}
} catch(error){
cosole.log(error)
}
}
)
再輸出一次：
$ node index.js
1 克雷的橋
2 當我想你時，全世界都救不了我
3 我殺的人與殺我的人
4 念念時光真味
5 蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】
6 苦雨之地
7 你已走遠，我還在練習道別
8 想把餘生的溫柔都給你
9 你是我最熟悉的陌生人
10 偷書賊（25萬本紀念版本）
